<template>
    <view class="points-detail-container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="placeholder"></view>
            <view class="page-title">积分明细</view>
            <view class="placeholder"></view>
        </view>

        <!-- 积分卡片 -->
        <view class="points-card">
            <view class="points-info">
                <view class="points-label">当前积分</view>
                <view class="points-value">{{ userPoints }}</view>
            </view>
        </view>

        <!-- 筛选标签 -->
        <view class="filter-tabs">
            <view v-for="(tab, index) in filterTabs" :key="index" class="filter-tab"
                :class="{ active: currentFilter === tab.value }" @click="selectFilter(tab.value)">
                {{ tab.label }}
            </view>
        </view>

        <!-- 积分记录列表 -->
        <view class="records-list">
            <view v-if="filteredRecords.length === 0" class="empty-state">
                <image src="/static/images/empty.svg" mode="aspectFit" class="empty-image"></image>
                <view class="empty-text">暂无积分记录</view>
            </view>

            <view v-else class="record-item" v-for="(record, index) in filteredRecords" :key="index">
                <view class="record-left">
                    <view class="record-title">{{ record.title }}</view>
                    <view class="record-time">{{ record.time }}</view>
                </view>
                <view class="record-points"
                    :class="{ 'record-points-positive': record.type === 'increase', 'record-points-negative': record.type === 'decrease' }">
                    {{ record.type === 'increase' ? '+' : '-' }}{{ record.points }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userPoints: 1250,
            currentFilter: 'all',
            filterTabs: [
                { label: '全部', value: 'all' },
                { label: '收入', value: 'increase' },
                { label: '支出', value: 'decrease' }
            ],
            pointsRecords: [
                {
                    id: 1,
                    title: '回收旧衣物',
                    points: 120,
                    type: 'increase',
                    time: '2023-06-15 14:30',
                    category: 'recycle'
                },
                {
                    id: 2,
                    title: '兑换环保购物袋',
                    points: 100,
                    type: 'decrease',
                    time: '2023-06-12 09:45',
                    category: 'exchange'
                },
                {
                    id: 3,
                    title: '签到奖励',
                    points: 5,
                    type: 'increase',
                    time: '2023-06-10 08:21',
                    category: 'sign'
                },
                {
                    id: 4,
                    title: '回收旧衣物',
                    points: 85,
                    type: 'increase',
                    time: '2023-06-05 16:08',
                    category: 'recycle'
                },
                {
                    id: 5,
                    title: '兑换不锈钢保温杯',
                    points: 300,
                    type: 'decrease',
                    time: '2023-05-28 13:15',
                    category: 'exchange'
                },
                {
                    id: 6,
                    title: '邀请好友',
                    points: 50,
                    type: 'increase',
                    time: '2023-05-25 10:30',
                    category: 'invite'
                },
                {
                    id: 7,
                    title: '积分兑换人民币',
                    points: 200,
                    type: 'decrease',
                    time: '2023-05-20 15:45',
                    category: 'cash'
                }
            ]
        };
    },
    computed: {
        filteredRecords() {
            if (this.currentFilter === 'all') {
                return this.pointsRecords;
            } else {
                return this.pointsRecords.filter(record => record.type === this.currentFilter);
            }
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },

        selectFilter(filter) {
            this.currentFilter = filter;
        }
    }
};
</script>

<style lang="scss">
@import '../../styles/global.scss';

.points-detail-container {
    padding-bottom: 40rpx;
    background-color: $bg-color;
    min-height: 100vh;
}

/* 顶部导航 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: $card-bg;
    position: relative;
    border-bottom: 1rpx solid $border-light;

    .back-button {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
            font-size: 36rpx;
            color: $text-black;
        }
    }

    .page-title {
        font-size: 36rpx;
        font-weight: bold;
        color: $text-black;
    }

    .placeholder {
        width: 60rpx;
    }
}

/* 积分卡片 */
.points-card {
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background-color: $primary-green;
    color: $text-white;
    box-shadow: $card-shadow;

    .points-info {
        .points-label {
            font-size: 28rpx;
            margin-bottom: 10rpx;
        }

        .points-value {
            font-size: 56rpx;
            font-weight: bold;
        }
    }
}

/* 筛选标签 */
.filter-tabs {
    display: flex;
    padding: 0 20rpx;
    margin-bottom: 20rpx;

    .filter-tab {
        flex: 1;
        padding: 16rpx 0;
        margin: 0 10rpx;
        font-size: 28rpx;
        color: $text-gray;
        background-color: $card-bg;
        border-radius: 8rpx;
        text-align: center;

        &.active {
            color: $primary-green;
            font-weight: bold;
            background-color: $light-green;
        }
    }
}

/* 积分记录列表 */
.records-list {
    margin: 0 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: $card-bg;
    box-shadow: $card-shadow;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid $border-light;

    &:last-child {
        border-bottom: none;
    }

    .record-left {
        .record-title {
            font-size: 28rpx;
            font-weight: bold;
            color: $text-black;
            margin-bottom: 8rpx;
        }

        .record-time {
            font-size: 24rpx;
            color: $text-light-gray;
        }
    }

    .record-points {
        font-size: 32rpx;
        font-weight: bold;

        &-positive {
            color: $primary-green;
        }

        &-negative {
            color: $status-error;
        }
    }
}

/* 空状态 */
.empty-state {
    padding: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
    }

    .empty-text {
        font-size: 28rpx;
        color: $text-light-gray;
    }
}
</style>